<template>
  <div class="main">
    <div class="head">
      <i><img src="static/images/login.jpg" alt=""></i>
      <span>用户名密码登录</span>
    </div>
    <form>
      <div><label for="account"><img src="static/images/LoginAndRegister/account.jpg" alt=""></label>
        <input type="text" placeholder="您的账号" id="account" class="account" name="username" v-model="username"></div>
      <div><label for="pass"><img src="static/images/LoginAndRegister/pass.jpg" alt=""></label>
        <input type="password" id="pass" class="pass" placeholder="您的密码" name="password" v-model="password"></div>
      <input type="button" value="登录" @click="login">
    </form>
    <div class="footer">
      <a><router-link tag="li"  :to="{name:'Register'}"> 去注册一个吧!</router-link></a>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import {mapMutations} from 'vuex';
    export default {
        name: "Login",
        data(){
          return {
            username:'',
            password:'',
          }
        },
        computed:mapState(["token","accountName","avatar"]),
        methods:{
          ...mapMutations(['setToken','setAccountName','setAvatar']),
          login(){
            this.$axios({
              url:'http://47.92.167.153:8085/index/login',
              method:'post',
              data:{
                username:this.username,
                password:this.password
              }
            }).then((res)=>{
              let re=res.data;
              if(re.success){
                re=re.data;
                this.setToken(re.token);
                this.setAccountName(re.username);
                this.setAvatar(re.avatar);
                sessionStorage.setItem("token", re.token);
                sessionStorage.setItem("accountName", re.username);
                this.$router.push({name:'HomePage'})
              }else{
                this.$notify({
                  title: '警告',
                  message: re.msg,
                  type: 'warning'
                });
              }
            }).catch(function(error){
              console.log(error)
            })
          }
        },
        mounted() {

        }
    }
</script>

<style scoped>
  .main{
    width:440px;
    height:440px;
    background:#FCFCFC;
    border:1px solid #fff;
    border-radius: 15px;
    margin:135px auto;
    position: relative;
  }
  .head{
    width:180px;
    height:45px;
    margin:50px auto;
    vertical-align: middle;
  }
  .head span{
    font-size: 30px;
    display: inline-block;
    width: 300px;
    text-align: center;
    /*text-shadow: 5px 5px 5px black, 0px 0px 2px black; */
    position: relative;
    top:-40px;
    left:-60px;
    text-shadow: 0 0 2px black;
    color:#CDCDCD;
  }
  .head i{
    display: inline-block;
    width:60px;
    height:45px;
  }
  form div{
    width:370px;
    height:40px;
    margin:0px auto 34px;
  }
  form div label{
    width:43px;
    height:50px;
    display: inline-block;

  }
  form div input{
    width:275px;
    height:40px;
    position: relative;
    top:-20px;
    border:1px solid #F0F0F0;
    border-radius:15px;
    /*text-indent:5px;*/
    padding-left:10px;
  }
  form>input{
    width:167px;
    height:53px;
    position: absolute;
    left:28%;
    margin-top: 23px;
    border-radius:10px;
    background:#689AFB;
    font-size: 25px;
    color:#fff;
  }
  form>input:hover{
    cursor:pointer;
  }
  .footer{
    text-align: center;
    position: absolute;
    bottom:40px;
    left:55%;
  }
  .footer a{
    text-decoration: none;
    color:#666666;
    cursor: pointer;
  }
</style>
